<template id="selectmap">
    <div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="60%"
                @opened="dialogOpened">
            <div class="selectmap" id="container"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'selectmap',
        props: {
            mapLng: {
                type: Number,
                default: 114.304692
            },
            mapLat: {
                type: Number,
                default: 30.59331
            },
            mapAddress: {
                type: String,
                default: ''
            }
        },
        // props: ['srcType'],
        data() {
            return {
                dialogVisible: false,
                // mapLng:114.304692,
                // mapLat:30.59331,
                // mapAddress:'湖北省武汉市',
                markersArray: [],
                searchService: '',
            }
        },
        created() {
            // console.log(2334)
            // let that = this;
            // setTimeout(() => {
            //     this.init()
            // }, 500)
        },
        methods: {
            dialogOpened() {
                let that = this;
                setTimeout(() => {
                    this.init()
                }, 500)
            },
            init() {
                var that = this;
                // console.log('234', that.mapAddress)
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(that.mapLat ? that.mapLat : 30.59331, that.mapLng ? that.mapLng : 114.304692),
                    zoom: 13
                });
                // console.log('345',map)
                var marker = new qq.maps.Marker({
                    position: new qq.maps.LatLng(that.mapLat ? that.mapLat : 30.59331, that.mapLng ? that.mapLng : 114.304692),
                    draggable: true,
                    map: map
                });
                qq.maps.event.addListener(marker, 'dragend', function (event) {
                    console.log(event)//搜索后的坐标
                    var mapLat = event.latLng.lat;
                    var mapLng = event.latLng.lng;
                    // console.log('搜索后的坐标')
                    that.$api.get('channel/shop/map', {
                        "lat": that.mapLat,
                        "lng": that.mapLng,
                    }, res => {
                        if (res.status == 0) {
                            var mapAddress = res.result.address;
                            that.$emit('clickmap', mapAddress, mapLat, mapLng)
                        } else {
                            // console.log(res.message);
                        }
                    });
                    // $('#latLng').val(event.latLng);
                });
                that.$set(that.markersArray, 0, marker);
                qq.maps.event.addListener(map, 'click', function (event) {
                    that.deleteOverlays()
                    var clickMarker = new qq.maps.Marker({
                        position: event.latLng,
                        draggable: true,
                        map: map
                    });
                    that.$set(that.markersArray, 1, clickMarker);
                    console.log(event)
                    // alert(event.latLng)//点击后的坐标
                    var mapLat = event.latLng.lat;
                    var mapLng = event.latLng.lng;
                    that.$api.get('channel/shop/map', {
                        "lat": mapLat,
                        "lng": mapLng,
                    }, res => {
                        if (res.status == 0) {
                            var mapAddress = res.result.address;
                            that.$emit('clickmap', mapAddress, mapLat, mapLng)
                        } else {
                            // console.log(res.message);
                        }
                    });
                    qq.maps.event.addListener(clickMarker, 'dragend', function (event) {
                        // alert(event.latLng)//拖拽后的坐标
                        var mapLat = event.latLng.lat;
                        var mapLng = event.latLng.lng;
                        that.$api.get('channel/shop/map', {
                            "lat": mapLat,
                            "lng": mapLng,
                        }, res => {
                            if (res.status == 0) {
                                var mapAddress = res.result.address;
                                that.$emit('clickmap', mapAddress, mapLat, mapLng)
                            } else {
                                // console.log(res.message);
                            }
                        });
                        // $('#latLng').val(event.latLng);
                    });
                });
                var latlngBounds = new qq.maps.LatLngBounds();
                //查询poi类信息
                var searchService = new qq.maps.SearchService({
                  location: "北京",
                  pageIndex: 1,
                  pageCapacity: 1,
                  autoExtend: true,
                    complete: function (results) {
                        var pois = results.detail.pois;
                        for (var i = 0, l = pois.length; i < l; i++) {
                            var poi = pois[i];
                            latlngBounds.extend(poi.latLng);
                            var marker = new qq.maps.Marker({
                                map: map,
                                draggable: true,
                                position: poi.latLng
                            });
                            marker.setTitle(i + 1);
                            that.$set(that.markersArray, 2, marker);
                        }
                        map.fitBounds(latlngBounds);
                        var mapLat = results.detail.pois[0].latLng.lat;
                        var mapLng = results.detail.pois[0].latLng.lng;
                        that.$api.get('channel/shop/map', {
                            "lat": mapLat,
                            "lng": mapLng,
                        }, res => {
                            if (res.status == 0) {
                                var mapAddress = res.result.address;
                                that.$emit('clickmap', mapAddress, mapLat, mapLng)
                            } else {
                                // console.log(res.message);
                            }
                        });
                        qq.maps.event.addListener(marker, 'dragend', function (event) {
                            //  alert(event.latLng)//拖拽后的坐标
                            var mapLat = event.latLng.lat;
                            var mapLng = event.latLng.lng;
                            that.$api.get('channel/shop/map', {
                                "lat": mapLat,
                                "lng": mapLng,
                            }, res => {
                                if (res.status == 0) {
                                    var mapAddress = res.result.address;
                                    that.$emit('clickmap', mapAddress, mapLat, mapLng)
                                } else {
                                    // console.log(res.message);
                                }
                            });
                        });

                    }
                });
                this.searchService = searchService
            },
            deleteOverlays() {
                if (this.markersArray) {
                    for (let i in this.markersArray) {
                        this.markersArray[i].setMap(null);
                    }
                    this.markersArray.length = 0;
                }
            },
            searchKeyword() {
                this.deleteOverlays()
                // var keyword = document.getElementById("keyword").value;
                this.searchService.setPageCapacity(1);   //设置每页返回的结果数量。
                this.searchService.search(this.mapAddress);                 //开始查询
            }
        }
    }
</script>

<style lang="scss" scoped>
    #container {
        width: 1100px;
        height: 450px;
    }
</style>